<template>
    <div class="left">
        <div class="left-top" :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none' }">
            <div
                :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', textAlign: scaleX === -1 ? 'right' : 'left' }">
                {{ title }}</div>
        </div>
        <div class="left-bottom">
            <div style="display: flex; width: 100%; height: 100%;">
                <div class="chartsDom" style="width: 50%; height: 100%;">
                    <Echarts style="width: 100%; height: 100%; " :options="option" class="charts"></Echarts>
                </div>
                <div style="display: grid; grid-template-columns:1fr 1fr;width: 50%; height: 100%; ">

                    <div v-for="item in optionsData">
                        {{ item.name }} <span style="font-size: 12px;font-weight: 900;">
                            <!-- 百分比 -->
                            {{ (item.value / sum * 100).toFixed(0) }}%
                        </span>
                        <span style="font-size: 12px ;" :style="{ color: getColor(item.value) }">{{ item.value }}</span>
                    </div>
                </div>
                <!-- <span style="position:fixed; left:95px;bottom: 70px; font-size: 20px; color: #fff; font-weight: bold;">{{
                  sum }}</span> -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    scaleX: {
        type: Number,
        default: 1
    },
});
import Echarts from '../Echarts.vue';
import 'echarts-gl'



const optionsData = [
    {
        name: "中国银行",
        value: 110,
        itemStyle: {
            color: "#7652FC",
        },
    },
    {
        name: "建设银行",
        value: 200,
        itemStyle: {
            color: "#6993FF",
        },
    },
    {
        name: "工商银行",
        value: 190,
        itemStyle: {
            color: "#9BD342",
        },
    },

    {
        name: "农业银行",
        value: 190,
        itemStyle: {
            color: "#9BD342",
        },
    },
    {
        name: "招商银行",
        value: 190,
        itemStyle: {
            color: "#9BD342",
        },
    }
];
const sum = optionsData.reduce((acc, cur) => acc + cur.value, 0)
const chart = ref(null)
const option = ref(null)

onMounted(() => {
    option.value = getOption()
})

function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
    let midRatio = (startRatio + endRatio) / 2;
    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

    isSelected = false;
    k = typeof k !== "undefined" ? k : 1 / 3;

    let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let hoverRate = isHovered ? 1.05 : 1;

    return {
        u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
        },
        v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
        },
        x: function (u, v) {
            if (u < startRadian) {
                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            if (u > endRadian) {
                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        y: function (u, v) {
            if (u < startRadian) {
                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            if (u > endRadian) {
                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        z: function (u, v) {
            if (u < -Math.PI * 0.5) {
                return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
                return Math.sin(u) * h * 0.1;
            }
            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
        },
    };
}

function getPie3D(pieData, internalDiameterRatio) {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let k = typeof internalDiameterRatio !== "undefined"
        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
        : 1 / 3;

    for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value;

        let seriesItem = {
            name: pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
                show: false,
            },
            pieData: pieData[i],
            pieStatus: {
                selected: false,
                hovered: false,
                k: 1 / 10,
            },
            itemStyle: {
                color: pieData[i].itemStyle.color
            }
        };
        series.push(seriesItem);
    }

    for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
        );
        startValue = endValue;
    }

    return series;
}
function getColor(value: number) {
    if (value < 50) return "#ff4d4f";
    if (value < 100) return "#fa8c16";
    if (value < 150) return "#a0d911";
    if (value < 200) return "#13c2c2";
    if (value < 250) return "#1890ff";
    if (value < 300) return "#722ed1";
    if (value < 350) return "#eb2f96";
    if (value < 400) return "#9012fe";
    return "#fa541c";
}

function getOption() {
    const series = getPie3D(optionsData, 0.6);

    return {
        legend: {
            show: false // Hide the legend
        },
        tooltip: {
            // backgroundColor: "rgba(64, 180, 176, 0.6)",c
            borderColor: "rgba(64, 180, 176, 0.6)",
            textStyle: {
                color: "#fff",
                fontSize: 14,
            },
            formatter: (params) => {
                return `${params.seriesName}<br/>${params.value}万人`;
            },
        },
        // backgroundColor: "#092B35",
        xAxis3D: {
            min: -1,
            max: 1,
        },
        yAxis3D: {
            min: -1,
            max: 1,
        },
        zAxis3D: {
            min: -1,
            max: 1,
        },
        grid3D: {
            show: false,
            boxHeight: 1,
            left: 0,      // 去除左边距
            right: 0,      // 去除右边距
            top: '-12%',    // 上移12%,        // 去除上边距
            bottom: 0,     // 去除下边距
            width: "100%",  // Make the chart wider
            height: "100%", // Make the chart taller
            viewControl: {
                distance: 200, // Adjust distance to make chart appear larger
                alpha: 20,
                beta: 15,
                autoRotate: true,
                rotateSensitivity: 1,
                zoomSensitivity: 0,
                panSensitivity: 0,
            },
        },
        series: series,
    };
}
</script>

<style scoped>
/* 保持原有样式不变 */
.left {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.left-top {
    height: 25%;
    background: url('/homePageImg/tl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding: 0 0 4% 0;
    font-size: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-bottom {
    flex: 1;
    font-size: 2px;
}

.chart-container {
    width: 100%;
    height: 100%;
}

.charts {
    background-size: 60% 60%;
}

.chartsDom {
    background: url('/public/images/leftthreeBottom.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* 让图片绕X轴旋转，形成向后躺的效果 */
    transform: rotateX(30deg);
}
</style>